<!doctype html>
<html lang="zh">
<head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>预制菜溯源系统</title>
   <link rel="stylesheet" href="../static/css/style.css">
   <style>
      body {
         font-family: 宋体;
      }
      .iq-card {
                border: none;
                box-shadow: 0 0 30px rgba(0,0,0,0.05);
                border-radius: 15px;
                margin: 20px 0;
                background: #fff;
            }

            .form-control {
                border-radius: 8px;
                padding: 12px;
                border: 1px solid #e1e1e1;
                transition: all 0.3s ease;
            }

            .form-control:focus {
                border-color: #2c9eae;
                box-shadow: 0 0 0 0.2rem rgba(44, 158, 174, 0.25);
                transform: translateY(-2px);
            }

            .input-group-text {
                background-color: #f8f9fa;
                border: 1px solid #e1e1e1;
                border-radius: 8px 0 0 8px;
                padding: 0.75rem;
                cursor: pointer;
            }

            .input-group-append .input-group-text {
                border-radius: 0 8px 8px 0;
            }

            .form-label {
                font-weight: 500;
                color: #555;
                margin-bottom: 8px;
                display: flex;
                align-items: center;
            }

            .btn-primary {
                background-color: #2c9eae;
                border: none;
                font-weight: 500;
                transition: all 0.3s ease;
            }

            .btn-primary:hover {
                background-color: #247d8a;
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(44, 158, 174, 0.3);
            }

            .password-icon {
                width: 80px;
                height: 80px;
                line-height: 80px;
                border-radius: 50%;
                background: rgba(44, 158, 174, 0.1);
                margin: 0 auto;
            }

            .input-group-text i {
                color: #2c9eae;
                font-size: 1.1rem;
            }

            .password-toggle:hover {
                background-color: #e9ecef;
            }

            /* 添加密码强度指示器样式 */
            .password-strength {
                height: 4px;
                margin-top: 8px;
                border-radius: 2px;
                transition: all 0.3s ease;
            }

            /* 添加表单验证样式 */
            .form-control:invalid:focus {
                border-color: #dc3545;
                box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
            }
   </style>
</head>
  <body>
<div id="loading"><div id="loading-center"></div></div>
      <div class="wrapper">
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="{{url_for('index')}}">
               <img src="../static/images/logo.png" class="img-fluid" alt="">
               <span>预制菜溯源系统</span>
               </a>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">

                     <li>
                        <a href="{{url_for('index')}}" class="iq-waves-effect"><i class="ri-home-4-fill"></i><span>首页</span></a>
                     </li>
                     <li>
                        <a href="{{url_for('trace_select')}}" class="iq-waves-effect"><i class="ri-search-2-line"></i><span>溯源查询</span></a>
                     </li>
                      <li class="menu-open active">
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-shield-user-fill"></i><span>个人中心 </span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('change_form')}}">资料编辑</a></li>
                              <li class="active"><a href="{{url_for('change_passwd')}}">修改密码</a></li>
                        </ul>
                     </li>

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-settings-fill"></i>用户管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('my_user')}}">我的用户</a></li>
                              <li><a href="{{url_for('add_user')}}">添加用户</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'transporter') %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-todo-fill"></i>运输管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('transport_test')}}">运输信息管理</a></li>
                              <li><a href="{{url_for('transport_show')}}">运输路线管理</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="{{url_for('product_manage')}}" class="iq-waves-effect"><i class="ri-file-edit-fill"></i><span>合约管理</span></a>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'producer') %}
                     <li>
                        <a href="javascript:void(0);"><i class="ri-stack-fill"></i>产品信息录入</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('raw_material')}}">原材料录入</a></li>
                              <li><a href="{{url_for('production_record')}}">生产记录创建</a></li>
                              <li><a href="{{url_for('product_generation')}}">产品生成</a></li>
                        </ul>
                     </li>
                     {% endif %}
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
         <div class="iq-top-navbar">
            <div class="iq-navbar-custom">

               <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="iq-search-bar">
                     <form action="#" class="searchbox">
                        <input type="text" class="text search-input" placeholder="请输入搜索内容...">
                        <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                     </form>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="ri-menu-3-line"></i>
                  </button>
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto navbar-list">

                        <li>
                           <a href="{{url_for('AI')}}">AI对话</a>
                        </li>

                        <li class="nav-item">
                           <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">所有通知<small class="badge  badge-light float-right pt-1">4</small></h5>
                                    </div>

                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/01.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">艾玛·沃森·比尼。</h6>
                                             <small class="float-right font-size-12">刚刚</small>
                                             <p class="mb-0">消息</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/02.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">新客户加入</h6>
                                             <small class="float-right font-size-12">5天前</small>
                                             <p class="mb-0">系统管理员</p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <ul class="navbar-list">
                     <li>
                        <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                           <img src="..//static/images/user1.jpg" class="img-fluid rounded mr-3" alt="user">
                           <div class="caption">
                              {% if user %}
                                  <h6 class="mb-0 line-height">{{ user.username }}</h6>
                                  <span class="font-size-12">{{ user.role }}</span>
                              {% else %}
                                  <h6 class="mb-0 line-height">未登录</h6>
                                  <span class="font-size-12">游客</span>
                              {% endif %}
                           </div>
                        </a>
                        <div class="iq-sub-dropdown iq-user-dropdown">
                           <div class="iq-card shadow-none m-0">
                              <div class="iq-card-body p-0 ">
                                 <div class="bg-primary p-3">
                                    <h5 class="mb-0 text-white line-height">你好-{{ user.username }}</h5>
                                 </div>
                                 <a href="{{url_for('change_form')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-file-user-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">个人中心</h6>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="{{url_for('change_passwd')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-profile-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">修改密码</h6>
                                       </div>
                                    </div>
                                 </a>


                                 <div class="d-inline-block w-100 text-center p-3">
                                    <a class="bg-primary iq-sign-btn" href="{{ url_for('logout') }}" role="button">退出登录<i class="ri-login-box-line ml-2"></i></a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </nav>

            </div>
         </div>
         <!-- TOP Nav Bar END -->
         <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="iq-card">
                        <div class="iq-card-body">
                            <!-- 添加消息提示区域 -->
                            {% with messages = get_flashed_messages() %}
                                {% if messages %}
                                    {% for message in messages %}
                                        <div class="alert {% if 'success' in message.lower() %}alert-success{% else %}alert-danger{% endif %} alert-dismissible fade show" role="alert">
                                            <i class="{% if 'success' in message.lower() %}ri-checkbox-circle-line{% else %}ri-error-warning-line{% endif %} mr-2"></i>
                                            {{ message }}
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            {% endwith %}

                            <div class="text-center mb-5">
                                <div class="password-icon mb-4">
                                    <i class="ri-lock-password-line" style="font-size: 3rem; color: #2c9eae;"></i>
                                </div>
                                <h2 class="mb-3" style="color: #333; font-weight: 600;">修改密码</h2>
                                <p class="text-muted">请输入您的当前密码和新密码进行修改</p>
                            </div>

                            <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <form id="password-form" method="POST" action="{{ url_for('update_password') }}" class="needs-validation" novalidate>
                                        <div class="form-group position-relative">
                                            <label for="old_password" class="form-label">
                                                <i class="ri-key-2-line mr-2"></i>当前密码
                                            </label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="ri-lock-line"></i>
                                                    </span>
                                                </div>
                                                <input type="password" class="form-control" id="old_password" name="old_password"
                                                       placeholder="请输入当前密码" required>
                                                <div class="input-group-append">
                                                    <span class="input-group-text password-toggle" onclick="togglePassword('old_password')">
                                                        <i class="ri-eye-line"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group position-relative">
                                            <label for="new_password" class="form-label">
                                                <i class="ri-key-line mr-2"></i>新密码
                                            </label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="ri-lock-password-line"></i>
                                                    </span>
                                                </div>
                                                <input type="password" class="form-control" id="new_password" name="new_password"
                                                       placeholder="请输入新密码" required>
                                                <div class="input-group-append">
                                                    <span class="input-group-text password-toggle" onclick="togglePassword('new_password')">
                                                        <i class="ri-eye-line"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group position-relative">
                                            <label for="confirm_password" class="form-label">
                                                <i class="ri-checkbox-circle-line mr-2"></i>确认新密码
                                            </label>
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="ri-lock-password-line"></i>
                                                    </span>
                                                </div>
                                                <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                                                       placeholder="请再次输入新密码" required>
                                                <div class="input-group-append">
                                                    <span class="input-group-text password-toggle" onclick="togglePassword('confirm_password')">
                                                        <i class="ri-eye-line"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="text-center mt-5">
                                            <button type="submit" class="btn btn-primary px-5 py-2" style="border-radius: 50px;">
                                                <i class="ri-save-line mr-2"></i>确认修改
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

 

        <script>
            // 自动隐藏提示消息
            setTimeout(function() {
                $('.alert').alert('close');
            }, 3000);  // 3秒后自动关闭

            function togglePassword(inputId) {
                const input = document.getElementById(inputId);
                const icon = event.currentTarget.querySelector('i');
                
                if (input.type === 'password') {
                    input.type = 'text';
                    icon.classList.remove('ri-eye-line');
                    icon.classList.add('ri-eye-off-line');
                } else {
                    input.type = 'password';
                    icon.classList.remove('ri-eye-off-line');
                    icon.classList.add('ri-eye-line');
                }
            }

            // 添加密码确认验证
            document.getElementById('password-form').addEventListener('submit', function(e) {
                const newPassword = document.getElementById('new_password').value;
                const confirmPassword = document.getElementById('confirm_password').value;
                
                if (newPassword !== confirmPassword) {
                    e.preventDefault();
                    alert('两次输入的密码不一致，请重新输入！');
                }
            });
        </script>

            <!-- Footer -->
            <footer class="bg-white iq-footer">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                           <li class="list-inline-item"><a href="#">使用帮助</a></li>
                           <li class="list-inline-item"><a href="#">进入官网</a></li>
                        </ul>
                     </div>
                     <div class="col-lg-6 text-right">
                        Copyright 2024 <a href="">预制菜溯源系统</a> 版权所有
                     </div>
                  </div>
               </div>
            </footer>
         </div>
      </div>

      
      <script src="../static/js/jquery.min.js"></script>
      <script src="../static/js/bootstrap.min.js"></script>
      <script src="../static/js/smooth-scrollbar.js"></script>
      <script src="../static/js/custom.js"></script>
      <script src="../static/js/laydate.js"></script>
		<script>
			lay('#version').html('-v'+ laydate.v);
			laydate.render({
				elem: '#date'
			  ,range: true
			  ,theme: '#2c9eae'
			});
         </script>
   </body>
</html>
